<!-- 运营-交易/收益 -->
<template>
	<view class="trade-layout">
		<view class="trade-menu-box">
			<text class="trade-menu-item" :class="[selectType == item.type ? 'trade-menu-item-active' : '']" v-for="item in types" :key="item.type" @tap="didSelectType(item)">{{item.title}}</text>
		</view>
		<!-- 收益统计 -->
		<view>
			<!-- 总统计 -->
			<view class="tj total-tj-sy-box">
				<text class="tj-title">今日收益(总)</text>
				<view class="tj-money-box">
					<text class="tj-money-text">{{todayInfo.totalValue}}</text>
					<text>元</text>
				</view>
				<view class="tj-count-box">
					<text>昨日</text>
					<text class="tj-count-text">{{todayInfo.value}}</text>
					<text>元</text>
				</view>
			</view>
			<uv-gap height="30rpx"></uv-gap>
			<!-- 本月统计 -->
			<view class="tj total-tj-sy-box">
				<text class="tj-title">本月收益(总)</text>
				<view class="tj-money-box">
					<text class="tj-money-text">{{monthInfo.totalValue}}</text>
					<text>元</text>
				</view>
				<view class="tj-count-box">
					<text>上月</text>
					<text class="tj-count-text">{{monthInfo.value}}</text>
					<text>元</text>
				</view>
			</view>
		</view>
		<!-- 统计图类型 -->
		<view class="tab-box">
			<uv-tabs :list="days" keyName="title" :activeStyle="{color:'#5F56EF',fontSize:'28rpx'}" :inactiveStyle="{color:'#666666',fontSize:'28rpx'}" :itemStyle="{height:'40px'}" lineColor="#5F56EF" @click="selectItem"></uv-tabs>
		</view>
		<!-- 统计图 -->
		<view class="chart-box">
			<xh-echarts ref="chartRef"></xh-echarts>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted,computed } from 'vue'
	import dayjs from 'dayjs'
	import { getTradeData, getTradeChartData, getIncomeData, getIncomeChartData } from '@/common/api/api.js'
	const types = ref([{ title: '全部', type: '1' }, { title: '直营', type: '2' }, { title: '非直营', type: '3' }])
	const days = ref([{ title: '近7天', type: '1' }, { title: '近30天', type: '2' }, { title: '近12月', type: '3' }])
	// 选择的类型
	const selectType = ref('1')
	// 选择的类型
	const selectChartType = ref('1')
	const chartRef = ref(null)
	const dataInfo = ref({
		totalIncome: "0",
		directTotalIncome: "0",
		notDirectTotalIncome: "0",
		dayTotalIncome: "0",
		directDayTotalIncome: "0",
		notDirectDayTotalNumber: "0",
		monthTotalIncome: "0",
		directMonthTotalIncome: "0",
		notDirectMonthTotalIncome: "0",
		yesterdayTotalIncome: "0",
		directYesterdayTotalIncome: "0",
		notDirectYesterdayTotalNumber: "0",
		lastTotalIncome: "0",
		lastDirectTotalIncome: "0",
		lastNotDirectTotalNumber: "0"
	})
	// 今日总交易量数据
	const todayInfo = computed(() => {
		if (selectType.value == '1') {
			return {
				totalValue: dataInfo.value.dayTotalIncome,
				value: dataInfo.value.yesterdayTotalAmount
			}
		} else if (selectType.value == '2') {
			return {
				totalValue: dataInfo.value.directDayTotalIncome,
				value: dataInfo.value.directYesterdayTotalIncome
			}
		} else {
			return {
				totalValue: dataInfo.value.notDirectDayTotalNumber,
				value: dataInfo.value.notDirectYesterdayTotalNumber
			}
		}
	})
	// 本月总交易量数据
	const monthInfo = computed(() => {
		if (selectType.value == '1') {
			return {
				totalValue: dataInfo.value.monthTotalIncome,
				value: dataInfo.value.lastTotalIncome
			}
		} else if (selectType.value == '2') {
			return {
				totalValue: dataInfo.value.directMonthTotalIncome,
				value: dataInfo.value.lastDirectTotalIncome
			}
		} else {
			return {
				totalValue: dataInfo.value.notDirectMonthTotalIncome,
				value: dataInfo.value.lastNotDirectTotalNumber
			}
		}
	})
	// 选择交易直属关系类型
	const didSelectType = (item) => {
		selectType.value = item.type
		getIncomeChartInfo()
	}
	// 选择统计图表类型
	const selectItem = (item) => {
		selectChartType.value = item.type
		getIncomeChartInfo()
	}
	// 获取收益数据
	const getIncomeInfo = async () => {
		const res = await getIncomeData()
		dataInfo.value = res.result
	}
	// 获取交易图表数据
	const getIncomeChartInfo = async () => {
		let params = {}
		params.collectType = selectType.value
		params.timeSlot = selectChartType.value
		const res = await getIncomeChartData(params)
		const list = res.result
		if (selectChartType.value == '1' || selectChartType.value == '3') {
			let amounts = list.map(item => parseFloat(item.amount))
			let dates = []
			if (selectChartType.value == '3') {
				dates = list.map(item => dayjs(item.date).format('MM月'))
			} else {
				dates = list.map(item => `${item.date.split('-')[1]}日`)
			}
			chartRef.value.reloadData(dates, amounts)
		} else {
			if (list.length >= 30) {
				let titles = []
				let values = []
				for (let i = 0; i < list.length; i += 5) {
					const startModel = list[i]
					const endModel = list[i + 4]
					const date = `${startModel.date.split('-')[1]}-${endModel.date.split('-')[1]}`
					let total = 0.0
					for (let j = i; j < i + 5; j++) {
						const model = list[j];
						total += parseFloat(model.amount);
					}
					titles.push(date)
					values.push(total)
				}
				chartRef.value.reloadData(titles, values)
			}
		}
	}
	// 刷新数据
	const reloadData = ()=>{
		getIncomeInfo()
		getIncomeChartInfo()
	}
	defineExpose({
		reloadData
	})
	onMounted(() => {
		console.log('组件挂着成功')
		reloadData()
	})
</script>

<style lang="scss" scoped>
	.trade-layout {
		padding: 0 30rpx;

		.trade-menu-box {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.trade-menu-item {
				margin-right: 20rpx;
				color: $xh-color-9;
				font-size: 28rpx;
			}

			.trade-menu-item-active {
				color: $xh-color-3;
			}
		}

		.tj {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: white;
			padding: 30rpx 0;
			font-size: 32rpx;

			.tj-money-box {
				color: white;
				font-size: 24rpx;
				margin-top: 10rpx;

				.tj-money-text {
					font-size: 50rpx;
					margin-right: 3px;
				}
			}

			.tj-count-box {
				margin-top: 10rpx;
				color: white;
				font-size: 24rpx;

				.tj-count-text {
					font-size: 30rpx;
					margin: 0 10rpx;
				}

				.tj-count-text-2 {
					margin-left: 20rpx;
				}
			}
		}

		.total-tj-box {
			background-image: url('/static/operate/yy_jrjy_bg@2x.png');
		}

		.month-tj-box {
			background-image: url('/static/operate/yy_byjy_bg@2x.png');

		}

		.total-tj-sy-box {
			background-image: url('/static/operate/yy_sy_bg@2x.png');
		}

		.tab-box {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx;
		}

		.chart-box {
			background-color: #fff;
			padding-bottom: 30rpx;
		}
	}
</style>